<template>
  <NuxtLayout name="user" menuActive="1">
    <div class="box">
      <el-descriptions title="" :column="1">
        <el-descriptions-item>
          <div class="box_qrcode" v-if="infoData.idCertifiedStatus < 1">
            <el-image
              :src="`https://api.jkb100.com/api/wx/qrcode.jpg?page=pages/userCenter/identity&envVersion=release&scene=${infoData.id}`"
              class="box_qrcode_image" />
            <p class="box_qrcode_text">请用微信扫一扫，完善认证信息</p>
            <br />
            <el-button @click="refreshFn">刷新</el-button>
          </div>
          <div class="box_qrcode" v-else>
            <el-result icon="success" title="认证成功" sub-title="恭喜您，已通过身份认证，可进行课程视频打卡学习">
              <template #extra>
                <a class="el-button el-button--primary" href="/curriculum">前往课程中心</a>
              </template>
            </el-result>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </NuxtLayout>
</template>

<script setup>
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_身份认证",
  keywords: "技考邦,身份认证",
  description: "技考邦，身份认证。",
  ogTitle: "技考邦_身份认证",
  ogDescription: "技考邦，身份认证。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const infoData = ref(useRoute().meta.userinfo || {})
// 刷新
function refreshFn() {
  window.location.reload()
}
</script>

<style lang="less" scoped>
.box {
  padding: 30px;

  &_qrcode {
    display: table;
    margin: 0 auto;
    text-align: center;

    &_image {
      width: 165px;
      height: 165px;
      display: block;
      margin: 0 auto;
    }

    &_text {
      margin: 10px 0 0 0;
      text-align: center;
      font-size: 14px;
      color: #999;
    }
  }
}
</style>